<template>
	<view class="transferanother_container">
		<u-form-item label="对方账户" label-width="142rpx"><u-input  v-model="inputValue" placeholder="徕吧账号/手机号码" @input="getId"/></u-form-item>
		<view class="transferanother_text">
			钱实时转入对方账户，无法退款
		</view>
		<view :class="btnShow == true? 'transferanother_btnY' :'transferanother_btnN'" @click="nextBtn">
			下一步
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				btnShow:false,
				inputValue:''
			}
		},
		watch:{
			inputValue:{
				handler(val,oldval){
					// console.log(val,oldval)
					if(val == ''){
						this.btnShow = false
					}else{
						this.btnShow = true
					}
				}
			},
			deep:true
		},
		methods:{
			getId(val){
				if(this.$u.test.mobile(val)){
					this.btnShow = true
				}
			},
			nextBtn(){
				uni.navigateTo({
					url:`/pages/tong/transferanother?phone=${this.inputValue}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transferanother_container{
		padding: 0 30rpx;
		margin-top: 58rpx;
		.transferanother_text{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			opacity: 1;
			margin-top: 20rpx;
		}
		.transferanother_btnY{
			width: 460rpx;
			height: 88rpx;
			background: #008573;
			opacity: 1;
			border-radius: 8rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			margin-left: 115rpx;
			margin-top: 68rpx;
		}
		.transferanother_btnN{
			width: 460rpx;
			height: 88rpx;
			background: #008573;
			opacity: 0.3;
			border-radius: 8rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			margin-left: 115rpx;
			margin-top: 68rpx;
		}
	}
</style>
